import React from "react";
import {
  StyleSheet,
  TouchableOpacity,
  Modal,
  SafeAreaView,
  View,
} from "react-native";
import * as Animatable from "react-native-animatable";

type Props = {
  visible: boolean;
  closeHandle: () => void;
  children: React.ReactNode;
};

const TopModal: React.FC<Props> = ({
  visible = false,
  closeHandle,
  children,
}) => {
  return (
    <Modal
      animationType="none"
      transparent={true}
      visible={visible}
      onRequestClose={closeHandle}
    >
      <TouchableOpacity
        activeOpacity={1}
        onPress={closeHandle}
        style={styles.modalContainer}
      >
          <Animatable.View
            animation="slideInDown"
            duration={300}
            style={[styles.modalContent]}
          >
            {children}
          </Animatable.View>
      </TouchableOpacity>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalContainer: {
    width: "100%",
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "center",
    backgroundColor: "rgba(0,0,0,0.5)",
  },
  modalContent: {
    width: "100%",
    backgroundColor: "white",
    padding: 20,
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
  },
});

export default TopModal;
